<template>
  <div>
    <tableHeader />
    <el-card>
      <div class="plan_info">
        <!-- 计划工序列表 -->
        <el-card class="business_devices-card lg-mb-20">
          <template #header>
            <div class="card-header">
              <span>工序工单列表</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <WorkOrder />
            </el-col>
          </el-row>
        </el-card>
        <!-- 设备排班 -->
        <!-- <el-card class="business_devices-card lg-mb-20">
          <template #header>
            <div class="card-header">
              <span>排班列表</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12">
              <Schedule />
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12">
              <el-calendar>
                <template #date-cell="{ data }">
                  <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split("-").slice(1).join("-") }}
                    {{ data.isSelected ? "✔️" : "员工" }}
                  </p>
                </template>
              </el-calendar>
            </el-col>
          </el-row>
        </el-card> -->
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { provide, computed, reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import tableHeader from "./tableHeader.vue";
import WorkOrder from "./workOrder.vue";
import { useNavTabs } from "@/store/navTabs";
import { useProductionPlan } from "@/store/backend/ProductionPlan/plan";
import { useDictionary } from "@/store/backend/tool/dictionary";
import { useFactoryEquipment } from "@/store/backend/FactoryM/equipmentUnit";
import Schedule from "./Schedule.vue";
import { useFactoryClass } from "@/store/backend/FactoryM/class";

const navTabs = useNavTabs();
const router = useRouter();
const plan = useProductionPlan();
const dictionary = useDictionary();
const equipUnit = useFactoryEquipment();
const equipClass = useFactoryClass();

const size = ref("");

const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap.default,
  };
});
interface anyObj {
  [key: string]: any;
}
const state: {
  deviceList: anyObj;
  currentPage: number;
  pageSize: number;
  total: number;
} = reactive({
  deviceList: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

type DeviceItem = {
  avatar: string;
  equipid: number;
  morestatus: number;
  name: string;
  status: number;
};

onMounted(() => {});

provide("navTabs", navTabs);
provide("plan", plan);
provide("dictionary", dictionary);
provide("equipUnit", equipUnit);
provide("equipClass", equipClass);
</script>
<style lang="scss" scoped>
.plan_info_info {
  &-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .plan-info-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.el-descriptions {
  margin: 20px 0;
}
.cell-item {
  display: flex;
  align-items: center;
}
.lg-mb-20 {
  margin-bottom: 20px;
}
</style>
